<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css"
        />
        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
        <script src="my.js">
        </script>
    </head>
    
    <body>
        <!-- Home -->
        <div data-role="page" data-theme="e" id="page1">
            <div data-theme="e" data-role="header" data-position="fixed">
                <h3>
                    〇〇サロン
                </h3>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        おしらせ
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            年末年始も営業します
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            成人式着付けの予約はじめました
                        </a>
                    </li>
                </ul>
                <img src="https://maps.googleapis.com/maps/api/staticmap?center=hikone&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
                width="288" height="200">
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="e">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="back">
                            戻る
                        </a>
                    </li>
                    <li>
                        <a href="#page10" data-transition="slide" data-theme="" data-icon="home">
                            予約する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-theme="" data-icon="star">
                            相談する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-transition="none" data-theme="" data-icon="info">
                            その他
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Login -->
        <div data-role="page" data-theme="e" id="page10">
            <div data-theme="e" data-role="header" data-position="fixed">
                <h3>
                    ログイン画面
                </h3>
            </div>
            <div data-role="content">
                <div>
                    <p>
                        <b>
                            ここから先は
                            <br>
                        </b>
                        <b>
                            ログインしてから
                        </b>
                        <b>
                            お進みください
                        </b>
                        &nbsp;
                    </p>
                    <p>
                        ★初めてご利用になるお客様
                        <br>
                        お名前、電話番号を入力して「新規登録」をしてください。&nbsp;
                    </p>
                    <p>
                        ★登録済みのお客様はお名前、電話番号を入力して「ログイン」してください
                    </p>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="name">
                            ユーザ名
                        </label>
                        <input name="name" id="name" placeholder="ご希望のユーザ名を入力して下さい" value="" type="text">
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="tel">
                            電話番号
                        </label>
                        <input name="tel" id="tel" placeholder="電話番号を入力して下さい" value="" type="tel">
                    </fieldset>
                </div>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page6">
                    ログイン
                </a>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page6">
                    新規登録
                </a>
            </div>
        </div>
        <!-- ReserveNew -->
        <div data-role="page" data-theme="e" id="page4">
            <div data-theme="e" data-role="header" data-position="fixed">
                <h3>
                    予約状況(TODO　プラン、担当者選択した後、時間を 選択する)
                </h3>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput3">
                            予約したい日付を選択してください
                        </label>
                        <input name="" id="textinput3" placeholder="" value="" type="date">
                    </fieldset>
                </div>
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        予約状況 (予約可能数)
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            09:00
                            <span class="ui-li-count">
                                3
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            10:00
                            <span class="ui-li-count">
                                0
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            11:00
                            <span class="ui-li-count">
                                2
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            13:00
                            <span class="ui-li-count">
                                2
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            14:00
                            <span class="ui-li-count">
                                1
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            15:00
                            <span class="ui-li-count">
                                2
                            </span>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            16:00
                            <span class="ui-li-count">
                                2
                            </span>
                        </a>
                    </li>
                </ul>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page5"
                data-icon="plus" data-iconpos="left">
                    予約
                </a>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page6"
                data-icon="delete" data-iconpos="left">
                    キャンセル
                </a>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="e">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="back">
                            戻る
                        </a>
                    </li>
                    <li>
                        <a href="#page10" data-transition="slide" data-theme="" data-icon="home">
                            予約する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-theme="" data-icon="star">
                            相談する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-transition="none" data-theme="" data-icon="info">
                            その他
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Reserve -->
        <div data-role="page" data-theme="e" id="page6">
            <div data-theme="e" data-role="header" data-position="fixed">
                <h3>
                    予約
                </h3>
            </div>
            <div data-role="content">
                <div>
                    <p>
                        <b>
                            予約は１件だけ登録できます。
                        </b>
                    </p>
                    <p>
                        <b>
                            すでに予約されている場合は、自動で予約確認画面に遷移する。
                        </b>
                    </p>
                    <p>
                        <b>
                            予約していない場合は新規予約画面に遷移する
                        </b>
                    </p>
                </div>
                <a data-role="button" data-transition="slide" href="#page4" data-icon="plus"
                data-iconpos="left">
                    予約する
                </a>
                <a data-role="button" data-transition="slide" href="#page5" data-icon="search"
                data-iconpos="left">
                    予約を確認する
                </a>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="e">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="back">
                            戻る
                        </a>
                    </li>
                    <li>
                        <a href="#page10" data-transition="slide" data-theme="" data-icon="home">
                            予約する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-theme="" data-icon="star">
                            相談する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-transition="none" data-theme="" data-icon="info">
                            その他
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- ReserveConfirm -->
        <div data-role="page" data-theme="e" id="page5">
            <div data-theme="e" data-role="header" data-position="fixed">
                <h3>
                    予約確認
                </h3>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        日時
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            2012/12/25 11:30〜
                        </a>
                    </li>
                </ul>
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        プラン
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            シャンプー
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            カット
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            カラー
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            トリートメント
                        </a>
                    </li>
                </ul>
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        担当
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            田村
                        </a>
                    </li>
                </ul>
                <a data-role="button" data-inline="true" href="#page5" data-icon="gear"
                data-iconpos="left">
                    変更
                </a>
                <a data-role="button" data-inline="true" href="#page5" data-icon="delete"
                data-iconpos="left">
                    削除
                </a>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="e">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="back">
                            戻る
                        </a>
                    </li>
                    <li>
                        <a href="#page10" data-transition="slide" data-theme="" data-icon="home">
                            予約する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-theme="" data-icon="star">
                            相談する
                        </a>
                    </li>
                    <li>
                        <a href="#" data-transition="none" data-theme="" data-icon="info">
                            その他
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <script>
              //App custom javascript
        </script>
    </body>

</html>